<template>
  <view class="user-page">
    <uv-row customStyle="padding: 50rpx 0 50rpx 20rpx;background-color:#fff">
      <uv-col span="8" style="flex-direction: row" align="center">
        <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :width="120" :height="120" shape="circle"></uv-image>
        <view class="user-account-info">
          <view>
            <uv-text text="新手982555" :size="30" :bold="true"></uv-text>
          </view>
          <view style="margin-top: 10rpx">
            <uv-text text="我是职称名称" :size="20"></uv-text>
          </view>
        </view>
      </uv-col>
      <uv-col span="2"/>
      <uv-col span="2">
        <uv-text text="设置" :size="26" suffixIcon="arrow-right" iconStyle="margin-top:3rpx" @click="setSettingClick"></uv-text>
      </uv-col>
    </uv-row>

    <view class="back">
      <uv-cell-group :border="false">
        <uv-cell title="填报记录" clickable customStyle="0 padding:20rpx">
          <template v-slot:right-icon>
            <uv-icon :size="30" name="arrow-right"></uv-icon>
          </template>
        </uv-cell>
        <uv-cell title="版本更新" :border="false" clickable customStyle="0 padding:20rpx">
          <template v-slot:right-icon>
            <uv-icon :size="30" name="arrow-right"></uv-icon>
          </template>
        </uv-cell>
      </uv-cell-group>
    </view>

    <uv-button text="退出登录" :plain="true" :hairline="true" class="user-logout" @click="logoutClick"></uv-button>

    <specimen-tabbar current-tab="account"></specimen-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }, methods: {
    logoutClick() {
      uni.navigateTo({url: '/user/login/login'})
    }, setSettingClick() {
      uni.$uv.toast('功能完善中，暂不可用！');
    }
  },
}
</script>

<style lang="scss" scoped>
.user-page {
  .user-account-info {
    margin-left: 20rpx;
  }

  .back {
    background-color: #fff;
    margin: 26rpx;
    border-radius: 16rpx;
  }

  .user-logout {
    margin: 26rpx;
    border-radius: 40rpx;

    ::v-deep .uv-button__text {
      color: #000000;
    }
  }

  .user-logout ::v-deep .uv-button__text {
    color: #000000;
  }
}

</style>
